<template>
    <div class="meterialDetail" >
        <!-- 头部面包屑 -->
        <headerBreadcrumb :breadcrumbItem='breadcrumbItem'/>
        <!-- 详细信息 -->
        <el-row >
            <el-col :span="6" v-for='(item,index) in list' :key='index'>
                <div class="grid">
                    <span class="name">{{item.name}}</span>
                    <span class="value">{{item.value}}</span>
                </div>
            </el-col>
        </el-row>
        <!-- 操作table -->
        <div class="content" style="margin-bottom:10px">
            <tab-vue :tabArr="tabArr" :curTabIndex="curTabIndex" @getCurTabIndexFn="getCurTabIndexFn"/>
            <div class="tableBody">
                <lpj-table-vue :baseNum='0' ref="lpjTable" :tableData="tableData" :tableHeaderData="tableHeaderData"  ></lpj-table-vue>
            </div>
        </div>
        <!--耗材图片  -->
        <div class="content">
            <tab-vue :tabArr="tabArr1" :curTabIndex="0" />
            <div class="tableBody">
                <img  width="104px"  height="104px"  style="margin:0 18px 10px 0"  v-for='(item,index) in imglist' :key='index' :src="item.image_url" alt="">
            </div>
        </div>
    </div>
</template>

<script>
/* eslint-disable */ 
import headerBreadcrumb from '@/components/headerBreadcrumb'
import LpjTableVue from "@/components/LpjTableVue"
import TabVue from "@/components/TabVue"
import {getConsumablesDetail} from './api'
export default {
    name:"meterialDetail",
    components:{headerBreadcrumb,TabVue,LpjTableVue},
    data(){
        return {
            breadcrumbItem:[{name:'耗材管理'},{name:'耗材详情'},],
            imglist:[],
            list:[
                {name:'耗材名称：',value:''},{name:'耗材编码：',value:''},{name:'耗材分类：',value:''},{name:'计量单位：',value:''},
                {name:'选择仓库：',value:''},{name:'单价：',value:''},{name:'供应商：',value:''},{name:'品牌名称：',value:''},
                {name:'采购时间：',value:''},{name:'入库时间：',value:''},{name:'规格型号：',value:''},{name:'入库数量：',value:''},
                {name:'库存下限：',value:''},{name:'采购人：',value:''},

            ],
            tabArr1:[{ label: '耗材图片' }],
            tabArr: [{ label: '补充记录' }],
            /*当前选中的 tab下标*/
            curTabIndex:0,
            tableData:[],
            /**操作列表表头数据 */
            tableHeaderData:   [ /**库存预警 */
                {label:"序号",  prop:"sortNum",},
                {label:"操作人",prop:"action_user_name"},
                {label:"所属仓库",prop:"wh_name",},
                {label:"新增时间",prop:"create_time",},
                {label:"新增数量",prop:"cr_num", },
                {label:"单价",prop:"cr_unit_price", },
                // {label:"库存预警值",prop:"c_stock_limit",},
            ],
        }
    },
    created(){
        if(this.$route.query.name=='盘点任务明细'){
             this.breadcrumbItem = [{name:'建盘点任务'},{name:'盘点任务明细'},{name:'耗材详情'},]
        }else{
            this.breadcrumbItem[0].name = this.$route.query.name
        }
        this.getData()
    },
    methods:{
        /*tab切换 */
        getCurTabIndexFn(i){
            this.curTabIndex=i;
            this.getRecord()
        },
        /**获取耗材操作记录 */
        getRecord(){
            let promise
            let param = {id:this.$route.query.id}
            switch(this.curTabIndex){
                case 0:promise=getReceiceInfoRecord(param);break; /**领用 */
            }
            promise.then(res=>{
                log(res)
                this.tableData = res
            })
        },
        /**获取耗材详情 */
        getData(){
            getConsumablesDetail({id:this.$route.query.id}).then(res=>{
                this.breadcrumbItem[1].name = res.c_name+'耗材详情'
                let arr =  ['c_name','c_code','category_name','c_unit',
                            'wh_name','c_unit_price','c_supplier','c_brand',
                            'c_purchase_date','c_storage_date','c_specs','c_stock',
                            'c_stock_limit','c_purchase_name',]
                arr.forEach((item,index)=>{
                    this.list[index].value = res[item]
                })
                this.imglist = res.image
                this.tableData = res.record
           })
        }
    }
}
</script>

<style lang='stylus'> 
.meterialDetail
    .el-row
        background-color #fff
        padding 30px 10px 6px 10px
        margin-bottom 10px
        .el-col
            margin-bottom 20px
            line-height : 18px;
            font-size: 12px;
            .name
                color: rgba(16, 16, 16, 1);
                text-align: right;
                display inline-block
                width 100px
            .value 
                color: rgba(111, 111, 111, 1);
                font-size: 12px;
    .content
        background-color #fff
        padding 24px 40px
        .tableBody
            padding 20px 0 0 0
</style>
